昨天練習用position的方式置中，
今天試試看用flexbox，
今天不要請阿鼠，

今天叫B6來幫我們。

(阿鼠是rat，B6是mice喔!)

<div class="animalCage">
    <img class="mice" src="https://drive.google.com/uc?id=1D2We8Pp0FGEAGiBMIfMnzsMg8RnAIkWb" height=70px>
</div>

.animalCage {
  background-color : #00aa00;
  height: 200px;
  width: 300px;
  border: 3px solid;
}

B6 很緊張，他也躲在籠子的角落裡，
我們把籠子變得舒適一點，讓他不要那麼緊張。

display: flex;
align-items:center;
justify-content:center;

B6 自然而然的就走到中間了!

深入去看了flex的用法發現很多方便的特性
justify-content決定了flex水平對齊的位置，
如果沒有設定，預設就是flex-start

justify-content: flex-start;

justify-content: flex-end;

則是會靠向右。

justify-content: center;

是我們用的水平置中。

justify-content: space-between;

justify-content: space-around;

都會平均分配elements，但不同的是space-between，會黏住左右兩邊；
space-around，則會平均分配間距。

align-items則是垂直對齊的位置。
與justify-content相似，除了可以靠頂端對齊，
也能對齊底部及置中。